<template>
  <div class="toptic-wrap">
    <a :class="{ active: type === 'do' }" href="javascript:void(0)" @click="filter('do')">做过的题（ {{ userDoQuestNum }} ）</a>
    <a :class="{ active: type === 'noDo' }" href="javascript:void(0)" @click="filter('noDo')">未做过的题（{{ total - userDoQuestNum }}）</a>
    <a :class="{ active: type === 'doTrue' }" href="javascript:void(0)" @click="filter('doTrue')">做对的题（{{ userQuestTrueNum }}）</a>
    <a :class="{ active: type === 'doFalse' }" href="javascript:void(0)" @click="filter('doFalse')">做错的题（{{ userQuestFalseNum }}）</a>
    <a :class="{ active: type === 'collect' }" href="javascript:void(0)" @click="filter('collect')">收藏夹（{{ userQuestCollect }}）</a>
    <span style="opacity: 0">{{ index }}</span>
  </div>
</template>

<script>
export default {
  name: 'TopicStatus',
  props: {
    index: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 0
    },
    answersResults: {
      type: Array,
      default: null
    },
    userDoQuestNum: {
      type: Number,
      default: null
    },
    userQuestCollect: {
      type: Number,
      default: null
    },
    userQuestFalseNum: {
      type: Number,
      default: null
    },
    userQuestTrueNum: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      type: ''
    }
  },
  methods: {
    filter(value) {
      this.type = value
      this.$emit('filter', value)
    }
  }
}
</script>

<style lang="scss" scoped>
  .toptic-wrap {
    height: 100%;
    line-height: 48px;
    text-indent: 30px;
    background: #f6f8f8;
    border-right: 1px solid #ddd;
    a {
      display: block;
    }
    .active {
      color: white;
      background: #409EFF;
    }
  }
</style>
